<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专辑详情 - 声破天</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/album.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="liked-songs.css">
</head>
<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                </svg>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="#" id="following-link" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 专辑详情内容 -->
            <div class="content-container album-container">
                <!-- 专辑头部信息 -->
                <section class="album-header">
                    <div class="album-cover">
                        <img src="assets/images/covers/cover2.jpg" alt="专辑封面" id="album-cover-img">
                        <div class="album-gradient-overlay"></div>
                    </div>
                    <div class="album-info">
                        <div class="album-type">专辑</div>
                        <h1 class="album-title" id="album-title">叶惠美</h1>
                        <div class="album-meta">
                            <div class="album-artist">
                                <img src="assets/images/artists/artist1.jpg" alt="艺术家照片" class="artist-thumbnail">
                                <a href="artist.html?name=周杰伦" class="artist-name">周杰伦</a> • 
                                <span class="album-year">2003</span> • 
                                <span class="album-tracks-count">11首歌曲</span> • 
                                <span class="album-duration">45分钟</span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 专辑操作按钮 -->
                <section class="album-actions">
                    <button class="play-button large-play-btn">
                        <i class="fas fa-play"></i> 播放
                    </button>
                    <button class="icon-button like-button">
                        <i class="far fa-heart"></i>
                    </button>
                    <button class="icon-button options-button">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </section>

                <!-- 专辑歌曲列表 -->
                <section class="track-list-container">
                    <div class="track-list-header">
                        <div class="track-number">#</div>
                        <div class="track-title">标题</div>
                        <div class="track-duration"><i class="far fa-clock"></i></div>
                    </div>
                    <div class="track-list">
                        <div class="track-item" data-track-id="1">
                            <div class="track-number">1</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">以父之名</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">5:42</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="2">
                            <div class="track-number">2</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">晴天</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">4:29</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="3">
                            <div class="track-number">3</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">三年二班</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">3:48</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="4">
                            <div class="track-number">4</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">东风破</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">5:15</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="5">
                            <div class="track-number">5</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">你听得到</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">3:50</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="6">
                            <div class="track-number">6</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">同一种调调</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">4:00</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="7">
                            <div class="track-number">7</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">梯田</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">3:54</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="8">
                            <div class="track-number">8</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">双刀</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">3:28</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="9">
                            <div class="track-number">9</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">她的睫毛</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">3:58</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="10">
                            <div class="track-number">10</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">爱情悬崖</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">4:04</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="track-item" data-track-id="11">
                            <div class="track-number">11</div>
                            <div class="track-play-icon"><i class="fas fa-play"></i></div>
                            <div class="track-info">
                                <div class="track-name">暗号</div>
                                <div class="track-artist">周杰伦</div>
                            </div>
                            <div class="track-duration">4:22</div>
                            <div class="track-actions">
                                <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                <button class="icon-button track-more-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 专辑详细信息 -->
                <section class="album-details">
                    <div class="album-info-container">
                        <h2>专辑信息</h2>
                        <div class="info-item">
                            <span class="info-label">发行日期:</span>
                            <span class="info-value">2003年7月31日</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">唱片公司:</span>
                            <span class="info-value">杰威尔音乐有限公司</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">制作人:</span>
                            <span class="info-value">周杰伦</span>
                        </div>
                        <div class="album-description">
                            <p>《叶惠美》是台湾歌手周杰伦发行的第四张专辑，发行于2003年7月31日。这张专辑的音乐风格融合了R&B、嘻哈、爵士、中国风等多种元素，收录了《以父之名》、《晴天》、《东风破》等经典歌曲。专辑名《叶惠美》是周杰伦外婆的名字。</p>
                        </div>
                    </div>
                    <div class="album-copyright">
                        <p>© 2003 杰威尔音乐有限公司</p>
                        <p>℗ 2003 杰威尔音乐有限公司</p>
                    </div>
                </section>

                <!-- 艺术家其他专辑 -->
                <section class="more-albums">
                    <h2>周杰伦的其他专辑</h2>
                    <div class="card-grid">
                        <div class="card">
                            <div class="card-img">
                                <img src="assets/images/covers/jay_fantasy.jpg" alt="范特西">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>范特西</h3>
                            <p>2001 • 专辑</p>
                        </div>
                        <div class="card">
                            <div class="card-img">
                                <img src="assets/images/covers/jay_qilixiang.jpg" alt="七里香">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>七里香</h3>
                            <p>2004 • 专辑</p>
                        </div>
                        <div class="card">
                            <div class="card-img">
                                <img src="assets/images/covers/jay_11.jpg" alt="11月的萧邦">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>11月的萧邦</h3>
                            <p>2005 • 专辑</p>
                        </div>
                        <div class="card">
                            <div class="card-img">
                                <img src="assets/images/covers/jay_still.jpg" alt="依然范特西">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>依然范特西</h3>
                            <p>2006 • 专辑</p>
                        </div>
                    </div>
                </section>

                <!-- 相似艺术家 -->
                <section class="similar-artists">
                    <h2>相似艺术家</h2>
                    <div class="artist-cards">
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist_jj.jpg" alt="林俊杰">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>林俊杰</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist_leehom.jpg" alt="王力宏">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>王力宏</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist_eason.jpg" alt="陈奕迅">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>陈奕迅</h3>
                            <p>艺术家</p>
                        </div>
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist_david.jpg" alt="陶喆">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>陶喆</h3>
                            <p>艺术家</p>
                        </div>
                    </div>
                </section>
            </div>
        </main>

        <!-- 播放器控制栏 -->
        <footer class="player-bar">
            <div class="now-playing">
                <img src="assets/images/covers/cover2.jpg" style="width: 60px; height: 60px; margin-right: 10px;" alt="当前">
                <div style="display: flex; flex-direction: column; justify-content: center;">
                    <div style="color: #aaa; font-size: 12px;">播放歌曲</div>
                    <div style="color: white; font-size: 14px;">晴天</div>
                </div>
                <div style="color: #aaa; font-size: 12px; margin-left: 10px;">周杰伦</div>
            </div>

            <div class="player-controls">
                <div class="control-buttons" style="display: flex; justify-content: center;">
                    <button style="background: none; border: none; color: #aaa; margin: 0 12px;"><i class="fas fa-random"></i></button>
                    <button style="background: none; border: none; color: #aaa; margin: 0 12px;"><i class="fas fa-step-backward"></i></button>
                    <button style="background: white; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 12px;"><i class="fas fa-play" style="color: black;"></i></button>
                    <button style="background: none; border: none; color: #aaa; margin: 0 12px;"><i class="fas fa-step-forward"></i></button>
                    <button style="background: none; border: none; color: #aaa; margin: 0 12px;"><i class="fas fa-redo"></i></button>
                </div>
                <div style="display: flex; align-items: center; width: 100%; margin-top: 5px;">
                    <span style="color: #aaa; font-size: 12px; min-width: 40px;">0:00</span>
                    <div style="height: 4px; background-color: #555; flex-grow: 1; margin: 0 10px; border-radius: 2px;">
                        <div style="height: 100%; width: 0%; background-color: #aaa; border-radius: 2px;"></div>
                    </div>
                    <span style="color: #aaa; font-size: 12px; min-width: 40px;">4:29</span>
                </div>
            </div>

            <div class="player-options" style="display: flex; align-items: center; justify-content: flex-end;">
                <button style="background: none; border: none; color: #aaa; margin: 0 8px;"><i class="fas fa-list"></i></button>
                <button style="background: none; border: none; color: #aaa; margin: 0 8px;"><i class="fas fa-desktop"></i></button>
                <div style="display: flex; align-items: center; margin: 0 8px;">
                    <button style="background: none; border: none; color: #aaa; margin-right: 8px;"><i class="fas fa-volume-up"></i></button>
                    <div style="width: 70px; height: 4px; background-color: #555; border-radius: 2px;">
                        <div style="height: 100%; width: 50%; background-color: #aaa; border-radius: 2px;"></div>
                    </div>
                </div>
                <button style="background: none; border: none; color: #aaa; margin: 0 8px;"><i class="far fa-heart"></i></button>
                <button style="background: none; border: none; color: #aaa; margin: 0 8px;"><i class="fas fa-expand"></i></button>
            </div>
        </footer>
    </div>

    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/album.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script src="assets/js/sidebar-utils.js"></script>
</body>
</html>